<template>
  <div id="canvas">
    <img id="show">
  </div>
</template>

<script>
import store from '@/store'
export default {
  data () {
    return {
      level: 1,
      user: {
        avatar: './static/core_user.jpg',
        name: '江湖小虾米'
      }
    }
  },
  methods: {
    init (imgList) {
      let cvs = document.createElement('canvas')
      let ctx = cvs.getContext('2d')
      console.log(imgList[0].height)
      cvs.height = imgList[0].height
      cvs.width = imgList[0].width
      ctx.textAlign = 'center'
      //render img
      ctx.drawImage(imgList[2], cvs.width / 2 - cvs.width * 0.2 / 2, cvs.height * 0.2, cvs.width * 0.2, cvs.width * 0.2)
      ctx.drawImage(imgList[0], 0, 0)
      ctx.drawImage(imgList[1], cvs.width / 2 - imgList[1].width / 2, cvs.height * 0.35)
      //render text
      ctx.font = "15px Helvetica";
      ctx.fillStyle = '#4b4f58'
      ctx.textAlign = 'center'
      ctx.fillText(this.user.name, cvs.width / 2, cvs.height * 0.335);
      //gene image to show
      let show = document.querySelector('#show')
      show.src = cvs.toDataURL('image/jpeg')

    },
    preload () {
      let base, level, avatar, imgList, waitList
      waitList = []
      imgList = [base, level, avatar]
      for (let index = 0; index < imgList.length; index++) {
        const element = imgList[index];
        element = document.createElement('img')
        switch (index) {
          case 0:
            element.src = './static/level_base.png'
            element.onload = () => {
              waitList.push('ok1')
              imgList[index] = element
              if (waitList.length == 3) this.init(imgList)
            }
            break
          case 1:
            element.src = './static/level_core_5.png'
            element.onload = () => {
              waitList.push('ok2')
              imgList[index] = element

              if (waitList.length == 3) this.init(imgList)

            }
            break
          case 2:
            element.src = this.user.avatar
            element.onload = () => {
              waitList.push('ok3')
              imgList[index] = element
              if (waitList.length == 3) this.init(imgList)
            }
            break
        }
      }
    },
  },
  mounted () {
    this.preload()
    // this.init()
  }
}
</script>
<style lang='stylus' scoped>
@import '../assets/styles/index.styl'
#canvas {
  position absolute
  top 0
  left 0
  z-index 199
  background green
}
#show {
  width 100vw
  position absolute
  top 0
  left 0
}
</style>